<template>
  <el-dialog
    title="打印退款单"
    :visible.sync="show"
    :append-to-body="true"
    width="1000px"
    @close="dialogClose"
  >
    <div v-loading="loading" ref="printRef" class="print-content">
      <div class="p-title">{{ title }}</div>
      <div class="p-title-2">{{ subTitle }}</div>
      <div class="t-b">
        <div class="t-r">
          <div class="t-d">订单所属事业部</div>
          <div class="t-d f-2">{{ editForm.department || "--" }}</div>
          <div class="t-d">日期</div>
          <div class="t-d f-2">{{ editForm.created_time || "--" }}</div>
        </div>
        <div class="t-r">
          <div class="t-d">退单人</div>
          <div class="t-d f-2">{{ editForm.realname || "--" }}</div>
          <div class="t-d">订单编号</div>
          <div class="t-d f-2">{{ editForm.order_sn || "--" }}</div>
        </div>
        <div class="t-r">
          <div class="t-d">客户名称</div>
          <div class="t-d f-2">{{ editForm.customer_name || "--" }}</div>
          <div class="t-d">签单产品</div>
          <div class="t-d f-2">{{ editForm.product_name || "--" }}</div>
        </div>
        <div class="t-r">
          <div class="t-d">收款金额</div>
          <div class="t-d">{{ editForm.money || "--" }}元</div>
          <div class="t-d">核算业绩</div>
          <div class="t-d">{{ editForm.performance || "--" }}</div>
          <div class="t-d">业绩处理方式</div>
          <div class="t-d">{{ editForm.calculate_way || "--" }}</div>
        </div>
        <div class="t-r">
          <div class="t-d">追回金额</div>
          <div class="t-d">{{ editForm.recover_money || "--" }}</div>
          <div class="t-d">退款金额</div>
          <div class="t-d">{{ editForm.refund_money || "--" }}</div>
          <div class="t-d">退回业绩</div>
          <div class="t-d">{{ editForm.calculate || "--" }}</div>
        </div>
        <div class="t-r">
          <div class="t-d">退款事由</div>
          <div class="t-d f-5">{{ editForm.content || "--" }}</div>
        </div>
        <div class="t-r">
          <div class="t-d t-c">审批记录</div>
        </div>
        <div class="t-r">
          <div class="t-d">审批人</div>
          <div class="t-d">审批结果</div>
          <div class="t-d">审批意见</div>
          <div class="t-d">审批时间</div>
        </div>
        <div v-for="item in examineList" :key="item.id" class="t-r">
          <div class="t-d">{{ item.realname || "--" }}</div>
          <div class="t-d">
            {{
              item.status == 1
                ? "审核通过"
                : item.status == 2
                ? "撤销"
                : item.status == 0
                ? "审核失败"
                : "--"
            }}
          </div>
          <div class="t-d">{{ item.content || "--" }}</div>
          <div class="t-d">{{ item.check_time || "--" }}</div>
        </div>
      </div>
      <div class="f">
        <div>打印人：{{ userInfo.realname || "--" }}</div>
        <div>打印时间：{{ printDate || "--" }}</div>
      </div>
    </div>
    <div slot="footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="handlePrint">打 印</el-button>
    </div>
  </el-dialog>
</template>
<script>
import moment from "moment";
import html2canvas from "html2canvas";
import { mapGetters } from "vuex";
import { crmContractGetRefundDetail } from "@/api/customermanagement/contract";
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    rowId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      title: "中慧蜀云集团有限公司",
      subTitle: "退款申请单",
      printDate: "",
      editForm: {},
      dataList: [], // 退款订单列表
      examineList: [], // 审核列表
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    show: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
        this.$emit("on-close");
      },
    },
  },
  watch: {
    value(val) {
      if (val) {
        this.printDate = moment().format("YYYY-MM-DD HH:mm:ss");
        this.getPrintInfo();
      }
    },
  },
  methods: {
    // 获取打印信息
    getPrintInfo() {
      this.loading = true;
      crmContractGetRefundDetail({ id: this.rowId })
        .then((res) => {
          this.editForm = res.data;
          this.examineList = res.data.examineRecord;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 关闭弹窗
    dialogClose() {
      this.show = false;
    },
    handlePrint() {
      const printElement = this.$refs.printRef;
      const canvas = document.createElement("canvas");
      canvas.width = printElement.offsetWidth;
      canvas.height = printElement.offsetHeight;
      html2canvas(printElement).then((ctx) => {
        const imgData = ctx.toDataURL("image/png");
        const printWindow = window.open("", "");
        printWindow.document.write(
          "<html><head><title>中慧蜀云集团有限公司-报销申请单</title></head><body>"
        );
        printWindow.document.write(
          '<img src="' + imgData + '" style="width:100%; height:auto;">'
        );
        printWindow.document.write("</body></html>");
        printWindow.document.close();
        printWindow.onload = () => {
          printWindow.onafterprint = () => {
            printWindow.close();
          };
          printWindow.print();
          this.show = false;
        };
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.p-title {
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  color: #000;
}
.p-title-2 {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  color: #000;
}
.t-b {
  border: 1px solid #000;
}
.t-b .t-r {
  display: flex;
  border-bottom: 1px solid #000;
}
.t-b .t-r:last-child {
  border-bottom: none;
}
.t-b .t-r .t-d {
  flex: 1;
  min-height: 36px;
  border-right: 1px solid #000;
  padding: 0 10px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.t-b .t-r .t-d:last-child {
  border-right: none;
}
.f {
  display: flex;
  height: 40px;
  align-items: center;
}
.f > div {
  flex: 1;
}
.f-2 {
  flex: 2 !important;
  padding: 0 20px !important;
}
.f-5 {
  flex: 5 !important;
  padding: 0 51px !important;
}
.t-c {
  justify-content: center;
}

@media print {
  img {
    page-break-before: always;
    page-break-after: always;
  }
}
</style>
